<template>
  <div>
    <div
      id="carousel-example-generic"
      class="carousel slide"
      data-ride="carousel"
    >
      <!--banner-->
      <ol class="carousel-indicators">
        <li
          data-target="#carousel-example-generic"
          :data-slide-to="index"
          :class="index==0?'active':''"
          v-for="(NavigationImg,index) in arrNavigationImg" :key="index"
        ></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="" :class="index==0?'item active':'item'" v-for="(NavigationImg,index) in arrNavigationImg" :key="index">
          <a href="content.html" target="_blank">
            <img :src="NavigationImg.NavigationImgUrl" alt />
          </a>
          <div class="carousel-caption" :title="NavigationImg.NavigationImgDescribe">
            {{NavigationImg.NavigationImgDescribe}}
          </div>
          <span class="carousel-bg"></span>
        </div>
      </div>
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span
          class="glyphicon glyphicon-chevron-left"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span
          class="glyphicon glyphicon-chevron-right"
          aria-hidden="true"
        ></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="content-block hot-content hidden-xs">
      <h2 class="title">
        <strong>本周热门排行</strong>
      </h2>
      <ul>
        <li
          :class="index == 0 ? 'large' : ''"
          v-for="(weekPopular, index) in arrWeekPopularBlogArticle"
          :key="index"
        >
          <a
            :href="'/home/article/' + weekPopular.ArticleId + '.html'"
            target="_blank" @mouseenter="ishowH3 = index" @mouseleave="ishowH3=null"
          >
            <img :src="weekPopular.ArticleThrink" alt />
            <h3 v-if="index == ishowH3" style="display: block;">{{weekPopular.ArticleTitle}}</h3>
          </a>
        </li>
        <!-- <li class="large">
          <a href="content.html" target="_blank">
            <img src="@/assets/images/img3.jpg" alt />
            <h3>欢迎来到个人技术博客技术博客</h3>
          </a>
        </li>
        <li>
          <a  href="content.html" target="_blank">
            <img src="@/assets/images/img3.jpg" alt />
            <h3>欢迎来到个人技术博客技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a href="content.html" target="_blank">
            <img src="@/assets/images/img3.jpg" alt />
            <h3>欢迎来到个人技术博客技术博客,在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a href="content.html" target="_blank">
            <img src="@/assets/images/img3.jpg" alt />
            <h3>欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li>
        <li>
          <a href="content.html" target="_blank">
            <img src="@/assets/images/img3.jpg" alt />
            <h3>欢迎来到个人技术博客技术博客，在这里可以看到网站前端和后端的技术等</h3>
          </a>
        </li> -->
      </ul>
    </div>
    <div class="content-block new-content">
      <h2 class="title">
        <strong>最新文章</strong>
      </h2>
      <div class="row" v-for="(arrBlog, index) in arrBlogArticle" :key="index">
        <div class="news-list">
          <div class="news-img col-xs-5 col-sm-5 col-md-4">
            <a target="_blank" :href="'/home/article/' + arrBlog.ArticleId + '.html'">
              <img :src="arrBlog.ArticleThrink" alt />
            </a>
          </div>
          <div class="news-info col-xs-7 col-sm-7 col-md-8">
            <dl>
              <dt>
                <a
                  target="_blank"
                  :href="'/home/article/' + arrBlog.ArticleId + '.html'"
                  >{{ arrBlog.ArticleTitle }}</a
                >
              </dt>
              <dd>
                <span class="name">
                  <a
                    href
                    :title="'由' + arrBlog.CreateUser + '发布'"
                    rel="author"
                    >{{ arrBlog.CreateUser }}</a
                  >
                </span>
                <span class="identity"></span>
                <span class="time">{{ arrBlog.CreateTime }}</span>
              </dd>
              <dd class="text">{{ arrBlog.ArticleBodySummary }}</dd>
            </dl>
            <div class="news_bot col-sm-7 col-md-8">
              <span class="tags visible-lg visible-md">
                <a
                  v-for="(lable, index) in arrBlog.LableInfo"
                  :key="index"
                  :href="'/search?lableId=' + lable.LableId + ''"
                  >{{ lable.LableName }}</a
                >
              </span>
              <span class="look">
                共
                <strong>{{ arrBlog.ArticleBrowsingNum }}</strong> 人围观，
                <strong>{{ arrBlog.ArticleLikeNum }}</strong> 人点赞了
              </span>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="news-more" id="pagination">
        <a href="">查看更多</a>
      </div>-->
      <div class="quotes" style="margin-top:15px">
        <!-- <span class="disabled">首页</span>
        <span class="disabled">上一页</span>
        <span class="current">1</span>
        <a href>2</a>
        <a href>下一页</a>
        <a href>尾页</a> -->
        <el-pagination
          background
          :page-size="pageModel.pageSize"
          @current-change="changePage"
          layout="prev, pager, next"
          :total="pageModel.count"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
export default {
  name: 'index',
  data () {
    return {
      arrBlogArticle: [], // 文章列表
      pageModel: {// 分页对象
        pageIndex: 1,
        count: 0,
        pageSize: 10
      },
      arrWeekPopularBlogArticle: [], // 本周热门
      ishowH3: null,
      arrNavigationImg: [
        {
          NavigationImgUrl: require('../assets/images/img1.jpg'),
          NavigationImgDescribe: '欢迎来到周黎博客'
        },
        {
          NavigationImgUrl: require('../assets/images/img2.jpg'),
          NavigationImgDescribe: '欢迎来到周黎博客'
        },
        {
          NavigationImgUrl: require('../assets/images/img3.jpg'),
          NavigationImgDescribe: '欢迎来到周黎博客'
        }
      ] // 轮播图
    }
  },
  created: function () {
    this.getArticleList()
    this.getWeekPopularBlogArticle()
    this.getNavigationImg()
  },
  methods: {
    // 获取文章列表
    getArticleList () {
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: '加载中'
      })
      this.$axios
        .get(config.blogService.blogHostUrl + 'api/blog/article', {
          params: {
            page: this.pageModel.pageIndex,
            limit: this.pageModel.pageSize,
            searchstr: this.$route.query.key,
            lableId: this.$route.query.lableId
          }
        })
        .then(res => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
          if (res.data.RetCode === 200) {
            this.arrBlogArticle = res.data.Data.Data
            this.pageModel.count = res.data.Data.RowCount
          }
        })
        .catch(err => {
          console.log(err)
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
        })
    },
    // 本周热门文章
    getWeekPopularBlogArticle () {
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: '加载中'
      })
      this.$axios
        .get(config.blogService.blogHostUrl + 'api/blog/article/popular', {
          params: {
            bWeek: true // 是否本周热门
          }
        })
        .then(res => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
          if (res.status === 200) {
            this.arrWeekPopularBlogArticle = res.data.Data
          }
        })
        .catch(err => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
          console.log(err)
        })
    },
    // 获取轮播图
    getNavigationImg () {
      let loadingInstance = Loading.service({
        fullscreen: true,
        text: '加载中'
      })
      this.$axios
        .get(config.blogService.blogHostUrl + 'api/blog/navigationimg', {
          params: {
          }
        })
        .then(res => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
          console.log(res)
          if (res.status === 200) {
            this.arrNavigationImg = res.data.Data
          }
        })
        .catch(err => {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close()
          })
          console.log(err)
        })
    },
    changePage (page) {
      // 当前页数发生变化
      this.pageModel.pageIndex = page
      this.getArticleList()
    }
  }
}
</script>
<style scoped>
</style>
